<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      height: 100%;
    }

    body {
      background: url(./images/wallhaven-kwkj26.png) no-repeat;
      position: relative;
    }

    #box1 {
      z-index: 10000;
      border: 5px solid yellow;
      width: 150px;
      height: 50px;
      background: white;
    }

    #box2 {
      z-index: 10000;
      width: 100%;
      height: 100%;
      background: red;
    }

    #box3 {
      z-index: 1000;
      width: 300px;
      height: 100px;
      margin: 0 auto;
      color: greenyellow;
      font: 900 50px/100px "";
      text-align: center;
    }

    button {
      display: block;
      width: 100px;
      height: 50px;
      font-size: 24px;
      font-weight: 900;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <!-- <img src="star.gif" alt=""> -->
  <div id="box1">
    <div id='box2'></div>
  </div>
  <div id="box3"></div>
  <button>开始游戏</button>
  <script>
    //1、随机出现星星
    var num = 150
    var sum = 0
    var t
    var btn = document.querySelector('button')
    var divbox3 = document.querySelector('#box3')
    function randomWh(max, min) {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
    btn.onclick = function () {
      t = setInterval(function () {
        num -= 10
        var divson = document.querySelector('#box2')
        divson.style.width = num + 'px'
        var img = document.createElement('img')
        var span = document.createElement('span')
        img.src = './images/star.gif'
        img.style.position = 'absolute'
        img.style.display = 'inline-block'
        img.width = randomWh(100, 40)
        img.height = randomWh(100, 40)
        var maxHeight = (window.innerHeight || document.documentElement.clientHeight) - (img.height)
        var maxWidth = (window.innerWidth || document.documentElement.clientWidth) - (img.width)
        img.style.left = randomWh(maxWidth, 0) + 'px'
        img.style.top = randomWh(maxHeight, 0) + 'px'
        document.body.appendChild(img)
        if (num == 0) {
          clearInterval(t)
          alert('GG GAME OVER')
          if (sum < 500) {
            divbox3.innerText = '您的得分是' + sum + '\n' + 'This is a loser'
          } else if (sum > 500 && sum < 1000) {
            divbox3.innerText = '您的得分是' + sum + '\n' + '有点东西'
          } else if (sum > 1000) {
            divbox3.innerText = '您的得分是' + sum + '\n' + 'Iegendary' + '已打败全国百分之99的电脑'
          }
        }
      }, 500)
    }
    // 删除星星
    var img = document.querySelector('img')
    document.body.onclick = function (evt) {
      sum += 100;
      var e = evt || window.event
      var target = e.target || e.srcElement
      if (target.nodeName == 'IMG') {
        this.removeChild(target)
        num += 5
        var divson = document.querySelector('#box2')
        divson.style.width = num + 'px'
        console.log(num);
      }
    }
  </script>
</body>

</html>